<template>
  <div class="yaml-editor-wrapper">
    <el-input
      v-model="content"
      type="textarea"
      :rows="rows"
      :readonly="readonly"
      class="yaml-editor"
      :placeholder="placeholder"
      @input="handleInput"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: Number,
    default: 300
  },
  readonly: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请输入YAML格式的内容'
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const content = ref(props.modelValue)
const rows = Math.floor(props.height / 24)

watch(() => props.modelValue, (newVal) => {
  content.value = newVal
})

const handleInput = () => {
  emit('update:modelValue', content.value)
  emit('change', content.value)
}
</script>

<style lang="scss" scoped>
.yaml-editor-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .yaml-editor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.el-textarea) {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    :deep(.el-textarea__inner) {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
      font-size: 14px;
      line-height: 1.6;
      resize: none;
      height: 100% !important;
      flex: 1;
    }
  }
}
</style>
